<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>tableDemo</title>
    <style>
        table {
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 0;
        }

        .tdBottomClass {
            position: relative;
            padding: 0;
        }
        .tdBottomClass::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 2px;
            /*background-color: rgb(218, 71, 71);*/
            cursor: s-resize; /* 南北方向的调整 */
            z-index: 10;
        }
        .tdRightClass {
            /*position: relative;*/
            padding: 0;
            position: absolute;
            top: 0;
            right: 0;
            width: 2px;
            height: 100%;
            /*background-color: rgb(218, 71, 71);*/
            cursor: w-resize; /* 南北方向的调整 */
            z-index: 10;
        }

        td {
            width: 150px;
            height: 60px;
        }
        textarea {
            width: 100%;
            height: 90%;
            box-sizing: border-box;
            resize: none;
            overflow: hidden;
            border: 0;
            margin: 0;
        }
        textarea:focus{
            outline: 1px solid #369a1d;
            margin-top: 4px;
            height: 100%;
            z-index: 99;
        }

    </style>
</head>
<body>
<div id="one">
    其他区域1
</div>
<div id="one1">
    其他区域1111
</div>
<div id="tableContainer" style="">
    <table>
        <tbody>
        <tr>
            <td id="myTd_1_1" class="tdBottomClass">
                <textarea id="cell_1_1" oninput="adjustHeight(this)"></textarea>
                <!--不使用伪元素来显示右边界,用div-->
                <div id="right_1_1" class="tdRightClass"></div>
            </td>
            <td id="myTd_1_2" class="tdBottomClass">
                <textarea id="cell_1_2" oninput="adjustHeight(this)"></textarea>
                <div id="right_1_2" class="tdRightClass"></div>
            </td>
            <td id="myTd_1_3" class="tdBottomClass">
                <textarea id="cell_1_3" oninput="adjustHeight(this)"></textarea>
                <div id="right_1_3" class="tdRightClass"></div>
            </td>
        </tr>
        <tr>
            <td id="myTd_2_1" class="tdBottomClass">
                <textarea id="cell_2_1" oninput="adjustHeight(this)"></textarea>
                <div id="right_2_1" class="tdRightClass"></div>
            </td>
            <td id="myTd_2_2" class="tdBottomClass">
                <textarea id="cell_2_2" oninput="adjustHeight(this)"></textarea>
                <div id="right_2_2" class="tdRightClass"></div>
            </td>
            <td id="myTd_2_3" class="tdBottomClass">
                <textarea id="cell_2_3" oninput="adjustHeight(this)"></textarea>
                <div id="right_2_3" class="tdRightClass"></div>
            </td>
        </tr>
        <tr>
            <td id="myTd_3_1" class="tdBottomClass">
                <textarea id="cell_3_1" oninput="adjustHeight(this)"></textarea>
                <div id="right_3_1" class="tdRightClass"></div>
            </td>
            <td id="myTd_3_2" class="tdBottomClass">
                <textarea id="cell_3_2" oninput="adjustHeight(this)"></textarea>
                <div id="right_3_2" class="tdRightClass"></div>
            </td>
            <td id="myTd_3_3" class="tdBottomClass">
                <textarea id="cell_3_3" oninput="adjustHeight(this)"></textarea>
                <div id="right_3_3" class="tdRightClass"></div>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<div id="two">
    其他区域2
</div>
<script>
    /**
     * 改变textarea的高度
     * @param textarea
     */
    function adjustHeight(textarea) {
        console.log('textarea',textarea)
        textarea.style.height = '100%';
        textarea.style.marginTop = 0 + 'px';
        textarea.style.marginBottom = -5 + 'px';
        textarea.style.height = textarea.scrollHeight + 'px';
    }

    /**
     * 获取td的高度  暂不需要
     * @param id
     * @returns {string}
     */
    function getHeightById(id) {
        // 这里注意padding  并没有padding或margin的高度
        // 获取td的高度
        const td = document.getElementById(id);
        const computedStyle = window.getComputedStyle(td);
        const height = computedStyle.height;
        console.log(height.split('px')[0]);
        return height.split('px')[0];
    }
    /**
     * 获取td的宽度  暂不需要
     * @param id
     * @returns {string}
     */
    function getWidthById(id) {
        // 获取td的宽度
        const td = document.getElementById(id);
        const computedStyle = window.getComputedStyle(td);
        const width = computedStyle.width;
        console.log(width.split('px')[0]);
        return width.split('px')[0];
    }

    /**
     *  修改td的高度
     * @param id
     * @param height
     */
    function changeHeight(id, height) {
        // 修改td的高度
        const td = document.getElementById(id);
        td.style.height = height;
    }

    /**
     * 修改td的宽度
     * @param id
     * @param width
     */
    function changeWidth(id, width) {
        // 修改td的宽度
        const td = document.getElementById(id);
        td.style.width = width;
    }

    /**
     * 获取所有td的padding的数值  暂不需要
     * @returns {string}
     */
    function getTdPadding() {
        const td = document.querySelector('td');
        return window.getComputedStyle(td).padding;
    }

    /**
     * 获取所有td的border的宽度  暂不需要
     * @returns {string}
     */
    function getTdBorder() {
        const td = document.querySelector('td');
        return window.getComputedStyle(td).border;
    }

    // 获取table
    const table = document.querySelector('table');
    // console.log('表格距离整体页面上方的距离(没有父级定位的情况下)',table.offsetTop)
    // const td = document.querySelector('#myTd_1_1');
    // // 获取td的top值 此时是相对于父元素table的 top值   注意td的padding与border都会影响  要加上
    // console.log('第一行td据上方的距离(包含padding,border)',td.offsetTop)
    // const td2 = document.querySelector('#myTd_2_1');
    // console.log('第二行td据上方的距离(包含padding,border)',td2.offsetTop)

    /**
     *  鼠标切换td高度
     * @param event
     */
    function onMouseDownTdHeight(event) {
        // 判断当前点击的对象的class是否为.tdBottomClass
        if (!event.target.classList.contains('tdBottomClass')) {
            return;
        }
        // 获取当前点击的对象的id
        const id = event.target.id;
        console.log('当前点击的td的id',id)
        // 获取这是第几行td   html对应myTd_2_1就是第二行第一列
        const tdRow = id.toString().split('_')[id.toString().split('_').length-2]
        const tdCol = id.toString().split('_')[id.toString().split('_').length-1]
        console.log('当前点击的td的第几行',tdRow,'第几列',tdCol)

        // 鼠标的整体位置
        let mouseY = event.clientY;
        // 鼠标高度减去表格与页面top的距离   即鼠标与第一行表格的相对距离
        let relativeY = mouseY - table.offsetTop;
        // console.log('鼠标按下:相对距离',relativeY)
        document.addEventListener('mouseup', onMouseUp);
        document.addEventListener('mousemove', onMouseMove);
        function onMouseUp(event) {
            // console.log('鼠标抬起')
            // 关闭 mousemove 监听
            document.removeEventListener('mousemove', onMouseMove);
            // 关闭 mouseup 监听
            document.removeEventListener('mouseup', onMouseUp);
        }
        function onMouseMove(event) {
            mouseY = event.clientY;
            // 鼠标高度减去表格与页面top的距离   即鼠标与第一行表格的相对距离
            relativeY = mouseY - table.offsetTop;
            let tdMinHeight = 60
            // 如果这个相对距离大于了第一行td的高度值
            if (relativeY > tdMinHeight) {
                // relativeY -(tdRow-1)*tdMinHeight  减去上边的表格的高度
                let currentTd = document.getElementById(`myTd_${tdRow}_${tdCol}`);
                let offsetTop = currentTd.offsetTop-table.offsetTop;
                // console.log(`myTd_${tdRow}_${tdCol}`+'td的offsetTop',offsetTop)
                // console.log((tdRow-1)*tdMinHeight)
                changeHeight(`myTd_${tdRow}_${tdCol}`, relativeY - offsetTop + 'px');
            } else if (relativeY < tdMinHeight) {
                changeHeight(`myTd_${tdRow}_${tdCol}`, tdMinHeight + 'px');
            }
        }
    }

    /**
     *  鼠标切换td宽度
     * @param event
     */
    function onMouseDownTdWidth(event) {
        // 判断当前点击的对象的class是否为.tdRightClass
        if (!event.target.classList.contains('tdRightClass')) {
            return;
        }
        // 获取当前点击的对象的id
        const id = event.target.id;
        console.log('当前点击的td的id',id)
        // 获取这是第几行td   html对应myTd_2_1就是第二行第一列
        const tdRow = id.toString().split('_')[id.toString().split('_').length-2]
        const tdCol = id.toString().split('_')[id.toString().split('_').length-1]
        console.log('当前点击的td的第几行',tdRow,'第几列',tdCol)
        // 鼠标的整体位置
        let mouseX = event.clientX;
        let relativeX = mouseX - table.offsetLeft;
        document.addEventListener('mouseup', onMouseUp);
        document.addEventListener('mousemove', onMouseMove);
        function onMouseUp(event) {
            document.removeEventListener('mousemove', onMouseMove);
            document.removeEventListener('mouseup', onMouseUp);

        }
        function onMouseMove(event) {
            mouseX = event.clientX;
            relativeX = mouseX - table.offsetLeft;
            let tdMinWidth = 150
            // 如果这个相对距离大于了第一行td的宽度值
            if (relativeX > tdMinWidth) {
                // relativeX -(tdCol-1)*tdMinWidth  减去左边的表格的宽度  目前tdMinWidth是个定值   要改为动态得到的宽度
                let currentTd = document.getElementById(`myTd_${tdRow}_${tdCol}`);
                let offsetLeft = currentTd.offsetLeft-table.offsetLeft;
                // console.log(`myTd_${tdRow}_${tdCol}`+'td的offsetLeft',offsetLeft)
                // console.log((tdCol-1)*tdMinWidth)
                changeWidth(`myTd_${tdRow}_${tdCol}`, relativeX - offsetLeft + 'px');
                // changeWidth(`myTd_${tdRow}_${tdCol}`, relativeX - (tdCol - 1) * tdMinWidth + 'px');
            } else if (relativeX < tdMinWidth) {
                changeWidth(`myTd_${tdRow}_${tdCol}`, tdMinWidth + 'px');
            }
        }

    }
    document.addEventListener('mousedown', onMouseDownTdHeight);
    document.addEventListener('mousedown', onMouseDownTdWidth);
</script>
</body>
</html>